﻿@using BookShop.Library.Constant
@{
    ViewBag.Title = "Thêm Khách hàng";
}

<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-edit"></i>@ViewBag.Title
        </div>
    </div>
    <div class="portlet-body form">
        <form class="form-horizontal" id="formAddCategory" method="POST" enctype="multipart/form-data" action="@Url.Action("Add")">
            <div class="form-body">
                <div class="alert alert-danger display-hide" style="display: none;">
                    <button class="close" data-close="alert"></button>
                    @AlertMessage.InvalidInput
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Email <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="email" id="email" value="@ViewBag.AddName"/>
                            <span class="help-block" for="email"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Username <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="username" id="username" value="@ViewBag.AddUsername"/>
                            <span class="help-block" for="username"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Password <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="password" id="password" value="@ViewBag.AddPassword"/>
                            <span class="help-block" for="password"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Họ và tên <span class="required">*</span></label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="fullName" id="fullName" value="@ViewBag.AddFullName"/>
                            <span class="help-block" for="fullName"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Số điện thoại</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="phone" id="phone" value="@ViewBag.AddPhone"/>
                            <span class="help-block" for="phone"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Địa chỉ</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="address" id="address" value="@ViewBag.AddAddress"/>
                            <span class="help-block" for="address"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-md-3">Ngày sinh</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control form-control-inline date-picker" name="birthdate" id="birthdate" size="16" value="@ViewBag.AddBirthdate" data-date-format="dd/mm/yyyy"/>
                            <span class="help-block" for="birthdate"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions right">
                <button class="btn blue" type="submit">Thêm</button>
                <a href="@Url.Action("List")" class="btn default">Quay lại</a>
            </div>
        </form>
    </div>
</div>

@section css
{
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/css/datepicker3.css")"/>
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.css")"/>
}

@section javascript
{
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-toastr/toastr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    @if (TempData[AlertMessage.TempDataKey] != null)
    {
        <script type="text/javascript">
            toastr['error']('@TempData[AlertMessage.TempDataKey].ToString()', 'Error');
            toastr.option = {
                "closeButton": true,
                "debug": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "1000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }
        </script>
    }
    <script type="text/javascript">
        $(document).ready(function () {
            $('.date-picker').datepicker({
                rtl: Metronic.isRTL(),
                autoclose: true
            });
            validateAdd();
        });
        function validateAdd() {
            var form1 = $('#formAddCategory');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    email: {
                        required: true
                    },
                    username: {
                        required: true,
                        rangelength: [8, 16]
                    },
                    password: {
                        required: true
                    },
                    fullName: {
                        required: true
                    },
                    phone: {
                        digits: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}